<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>本地应用-计数器</title>
    <style type="text/css">
        .input-num {
            width: 140px;
            border: 1px solid black;
            margin: 0 auto;
            height: 30px;
            border-radius: 5px;
        }

        button {
            width: 50px;
            height: 30px;
            border: none;
            color: red;
            font-size: 20px;
        }

        span {
            display: inline-block;
            width: 30px;
            height: 30px;
        }
    </style>
</head>
<body>
<!--html结构-->
<div id="app">
    <div class="input-num">
        <button @click="sub"><b>-</b></button>
        <span>{{num}}</span>
        <button @click="add"><b>+</b></button>
    </div>
</div>

<!-- 生产环境版本，优化了尺寸和速度 -->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script>
    var vue = new Vue({
        el: "#app",
        data: {
            num: 1
        },
        methods: {
            add: function () {
                if (this.num < 10) {
                    this.num++
                } else {
                    alert("别点了，到头了")
                }
            },
            sub: function () {
                if (this.num > 0) {
                    this.num--
                } else {
                    alert("别点了，最小了")
                }
            }
        }
    })
</script>
</body>
</html>
